<template>
    <z-paging>
        <u-sticky>
            <hedsty :headCentext="'会员中心'"></hedsty>
        </u-sticky>
        <view class="top_boxbx" style="background-image: url('https://morgan.dingxians.cn/static/insider/1.png');">
            <view class="touxiangfbox">
                <view class="left_touxiangcon_box">
                    <view class="touxiang_box">
                        <image :src="userInfo.avatar" mode="scaleToFill" />
                    </view>
                    <view class="touxiangkuang_box" v-if="userInfo.level_id > 0">
                        <image
                            :src="'https://morgan.dingxians.cn/static/txk/' + (userInfo.level_id >= 1 && userInfo.level_id <= 4 ? '1_4' : userInfo.level_id >= 5 && userInfo.level_id <= 8 ? '5_8' : userInfo.level_id >= 9 && userInfo.level_id <= 12 ? '9_12' : userInfo.level_id >= 13 && userInfo.level_id <= 16 ? '13_16' : '17_20') + '.png'"
                            mode="widthFix" />
                    </view>
                </view>
                <view class="right_boc">
                    <view class="top1_box">{{ userInfo.nickname }}</view>
                    <view class="top2_box">
                        <image :src="'https://morgan.dingxians.cn/static/user_levelid/' + userInfo.level_id + '.png'"
                            mode="heightFix" />
                    </view>
                </view>
            </view>

            <view class="jindutiao_box">
                <view class="yibai">{{ userInfo.grow_value }}/{{ userInfo.next_grade_integral }}</view>
                <u-line-progress :percentage="percentage" :showText="false" inactiveColor="rgba(240, 243, 245, .1)"
                    activeColor="rgba(255, 102, 102, 1)"></u-line-progress>
            </view>
            <view class="wenzi_box">
                <text style="text-align: left;">LV.{{ userInfo.level_id }}</text>
                <text style="text-align: center;">还需要{{ userInfo.difference_integral }}积分升级</text>
                <text style="text-align: right;">{{ userInfo.next_grade_name
                    }}</text>
            </view>
        </view>

        <view class="content_box" style="background-image: url('https://morgan.dingxians.cn/static/insider/2.png');">
            <view class="top_text_box">· 规则说明 ·</view>
            <view class="guize_text_box" v-html="contentHtm">
            </view>
        </view>

        <view v-if="userInfo.level_id > 0" class="vip1_box" style="background-image: url('https://morgan.dingxians.cn/static/insider/6.png');">
            VIP{{ current }}奖励&emsp;&emsp;获取条件：累计消费{{ quanbuList[current-1].total_pay }}
        </view>

        <template v-if="userInfo.level_id > 0">
            <view class="bottom_box">
                <swiper :autoplay="false" circular="true" :current="current-1" class="swiper" @change="intervalChange" indicator-active-color="white">
					<swiper-item class="swiper_item" v-for="(items, indexs) in quanbuList" :key="items.id" v-if="index != 0">
						<!-- <image @click="nextPage(item)" class="swiper_image" :src="item.image"></image> -->

                        <view class="left_box"
                    style="background-image: url('https://morgan.dingxians.cn/static/insider/4.png');"
                    >
                    <view class="top_box">奖励{{ indexs + 1 }}</view>
                    <view class="dengji_img_box">
                        <image :src="items.image" mode="widthFix" />
                    </view>
                    <view class="xiabiantext_box">{{ items.title }}</view>
                </view>
					</swiper-item>
				</swiper>
            </view>

            <!-- <view class="bottom_boxsss" v-if="(current) <= userInfo.level_id"
                style="background-image: url('https://morgan.dingxians.cn/static/insider/3.png');" @click="submit">
                领取奖励
            </view> -->
        </template>
    </z-paging>
</template>
<script>
import hedsty from '../../components/hedsty.vue'
export default {
    components: {
        hedsty
    },
    data() {
        return {
            userInfo: {},
            percentage: '',
            contentHtm: '',
            memberList: [],
            quanbuList:[],
            current:''
        }
    },
    onLoad() {

    },
    onShow() {
        this.getInfo()
        this.getprv()
        this.Member()
    },
    methods: {

        getInfo() {
            this.$Request.get(this.$api.user.users).then(res => {
                if (res.code == 200) {
                    this.userInfo = res.data
                    this.percentage = (res.data.grow_value / res.data.next_grade_integral * 100).toFixed(2)

                }
            })
        },

        getprv() {
            this.$Request.get(this.$api.agreen.contents + `/vip_rule`).then(res => {
                this.contentHtm = res.data.content
            })
        },
        intervalChange(e){
            console.log(e)
this.current = e.detail.current + 1
        },
        Member() {
            this.$Request.get(this.$api.user.userLevels).then(res => {
                if (res.code == 200) {
                    this.quanbuList = res.data
                    this.quanbuList.splice(0,1)
                    this.current = this.userInfo.level_id
                    // res.data.forEach(item => {
                    //     if (item.level_id == this.userInfo.level_id) {
                    //         this.memberList = []
                    //         this.memberList.push(item)
                    //     }

                    // });

                } else if (res.code == 403) {
                    this.$msg('请先登录')
                }
            })
        },

        submit() {
            console.log(this.current)
            let data = {
                level_id: this.current
            }
            this.$Request.post(this.$api.user.userCouponsReceive, data).then(res => {
                if (res.code == 200) {
                    this.$msg('领取成功')
                }
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.top_boxbx {
    width: 690rpx;
    height: 320rpx;
    background-size: 100% 100%;
    margin: auto;
    box-sizing: border-box;
    padding-top: 15rpx;
    margin-bottom: 37rpx;

    .touxiangfbox {
        width: 100%;
        height: 180rpx;
        display: flex;
        justify-content: flex-start;
        box-sizing: border-box;
        padding-left: 27rpx;
        margin-bottom: 19rpx;

        .left_touxiangcon_box {
            width: 146rpx;
            height: 180rpx;
            // background-color: red;
            position: relative;
            margin-right: 10rpx;

            .touxiang_box {
                position: absolute;
                width: 140rpx;
                height: 140rpx;
                border-radius: 50%;
                top: 30rpx;

                image {
                    width: 140rpx;
                    height: 140rpx;
                    border-radius: 50%;
                }
            }

            .touxiangkuang_box {
                position: absolute;
                width: 160rpx;
                height: 160rpx;
                border-radius: 50%;
                left: -20rpx;
                top: 13rpx;
                z-index: 2;

                image {

                    width: 174rpx;
                    border-radius: 50%;
                }
            }
        }

        .right_boc {
            height: 180rpx;
            box-sizing: border-box;
            padding-top: 55rpx;

            .top1_box {
                font-family: PingFang SC;
                font-weight: bold;
                font-size: 32rpx;
                color: #FFFFFF;
                margin-bottom: 19rpx;
            }

            .top2_box {
                height: 54rpx;

                image {
                    height: 100%;
                }
            }
        }
    }

    .jindutiao_box {
        width: 660rpx;
        height: 24rpx;
        background: rgba(240, 243, 245, .1);
        border-radius: 12rpx;
        margin: auto;
        position: relative;
        margin-bottom: 30rpx;

        .yibai {
            position: absolute;
            width: 500rpx;
            left: 0;
            right: 0;
            height: 24rpx;
            line-height: 24rpx;
            top: 0;
            bottom: 0;
            margin: auto;
            font-family: PingFang SC;
            font-weight: bold;
            font-size: 20rpx;
            color: #F8424F;
            text-align: center;
        }
    }

    .wenzi_box {
        width: 660rpx;
        margin: auto;
        height: 23rpx;
        font-family: PingFang SC;
        font-weight: bold;
        font-size: 24rpx;
        color: #F8424F;
        line-height: 23rpx;
        display: flex;
        justify-content: space-between;
    }
}

.content_box {
    width: 690rpx;
    height: 350rpx;
    margin: auto;
    background-size: 100% 100%;
    box-sizing: border-box;
    padding-top: 39rpx;
    margin-bottom: 17rpx;

    .top_text_box {
        width: 100%;
        text-align: center;
        height: 34rpx;
        font-family: text1;
        font-weight: bold;
        font-size: 36rpx;
        color: #FFEDD7;
        line-height: 48rpx;
        margin-bottom: 24rpx;
    }

    .guize_text_box {
        width: 618rpx;
        margin: auto;
        height: 206rpx;
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 22rpx;
        color: #F8424F;
        line-height: 40rpx;
        overflow: hidden;
        overflow-y: auto;
    }
}

.vip1_box {
    width: 617rpx;
    height: 82rpx;
    background-size: 100% 100%;
    font-family: text1;
    font-weight: bold;
    font-size: 22rpx;
    color: #FFEDD7;
    line-height: 82rpx;
    box-sizing: border-box;
    padding-left: 91rpx;
    margin-bottom: 20rpx;
}

.bottom_box {
    width: 690rpx;
   
    margin: auto;
    margin-bottom: 43rpx;
    // background-color: red;
    .swiper {
			position: relative;
			height: 340rpx;
			border-radius: 10rpx;
			overflow: hidden;

			.swiper_item {
				width: 690rpx !important;
				height: 340rpx !important;
				overflow: hidden; 
                display: flex;
                justify-content: space-between;

                .left_box {
        width: 220rpx;
        height: 340rpx;
        background-size: 100% 100%;
        box-sizing: border-box;
        padding-top: 13rpx;
        margin-bottom: 23rpx;

        .top_box {
            width: 100%;
            font-family: text1;
            font-weight: bold;
            font-size: 22rpx;
            color: #FFFFFF;
            text-align: center;
            margin-bottom: 23rpx;
        }

        .dengji_img_box {
            width: 162rpx;
            height: 200rpx;
            margin: auto;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 20rpx;

            image {
                display: block;
                width: 100%;
            }
        }

        .xiabiantext_box {
            width: 100%;
            font-family: PingFang SC;
            font-weight: 500;
            font-size: 22rpx;
            color: #FFFFFF;
            text-align: center;
        }
    }
			}
		}
    


}

.bottom_boxsss {
    width: 529rpx;
    height: 120rpx;
    background-size: 100% 100%;
    margin: auto;
    font-family: text1;
    font-weight: bold;
    font-size: 36rpx;
    color: #FFFFFF;
    line-height: 120rpx;
    text-align: center;
}
</style>